import { defineComponent, watch, shallowReactive } from 'vue';
import {api} from "@/axios/api";

// 声明类型
const PropsType = {
  nodes: {
    type: Array,
    require: true
  }, nodeFlyTrailLines: {
    type: Array,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 全局变量
    const mapAspectScale = 0.9; //地图长宽比
    const  mapZoom = 1.25; //地图缩放,当前视角的缩放比例
    // const   mapCenter= [104.114129, 37.550339],//当前视角的中心点
    const   mapRoam = true; //地图是否开启平游或缩放,是否开启拖拽漫游（移动和缩放）
    const mapScaleMin = 1.25;// 最小缩放比例,滚轮缩放的极限控制
    const mapScaleMax =10; // 最大缩放比例,滚轮缩放的极限控制
    // 配置项
    let options = shallowReactive({showLegendSymbol: null, tooltip: null, geo: null, series: null})

    //console.log("*******end reactive******")
    // 定义方法
    const methods = {
      options_tooltip ()  {
        return {
          trigger: 'item',
          textStyle: {
            fontSize: 14,
            lineHeight: 22,
          },
          position: point => {
            // 固定在顶部
            return [point[0] + 50, point[1] - 20];
          },
          // 如果需要自定义 tooltip样式，需要使用formatter
          /*
            formatter: params => {
              return `<div style=""> ... </div>`
            }
          */
        }
      },
      options_geo ()  {
        // 底部背景
        return [{
          show: true,
          map: 'china',
          aspectScale: mapAspectScale, //长宽比
          zoom: mapZoom, //缩放,当前视角的缩放比例
          // center: [104.114129, 37.550339],//当前视角的中心点
          roam: mapRoam, //是否开启平游或缩放
          scaleLimit: { //滚轮缩放的极限控制
            min: mapScaleMin, // 最小缩放比例
            max: mapScaleMax // 最大缩放比例
          },
          itemStyle: {
            borderColor: 'rgba(255,209,163, .5)', //区域边框颜色 //708090 004981 ,00508b  ,7ad5ff 008B8B 2F4F4F
            areaColor: 'rgba(73,86,166,.1)', //区域颜色 //#0494e1 #004098 #0083ce #021F49  'rgba(5,21,35,0.1)'
            //shadowOffsetY: 5,
            borderWidth: 0.5, //区域边框宽度
            shadowBlur: 5,
            shadowColor: 'rgba(107,91,237,.7)',
          },emphasis: {
            itemStyle: {
              borderColor: '#FFD1A3', //选中区域边框颜色 '#FFD1A3',
              areaColor: 'rgba(102,105,240,.3)',//选中区域颜色rgb(23, 28, 51); 'rgba(102,105,240,.3)'
              borderWidth: 1,//选中区域边框宽度
              shadowBlur: 5,
              shadowColor: 'rgba(135,138,255,.5)',
            },
          },
          label: {
            formatter: params => `${params.name}`,
            position: 'insideRight',
            fontSize: 16,
            color: '#FFFFFF',
          }
        }]
      },
      options_visualMap ()  {
        // 如果需要根据不同的数据展示深浅不一的颜色，则把这里打开
        // visualMap: {
        //   min: 0,
        //   max: 10,
        //   show: false,
        //   seriesIndex: 0,
        //   // 颜色
        //   inRange: {
        //     color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
        //   },
        // },
      },options_series (props)  {
         const series = [];
         const series_effect_scatter = methods.series_effect_scatter(props.nodes);
         if(series_effect_scatter){
           series.push(series_effect_scatter)
         }
        const { nodeFlyLines, nodeTrailLines } = methods.series_fly_trail_lines (props)
        if(nodeFlyLines && nodeFlyLines.length >0 ){
          nodeFlyLines.forEach((flyLines) => {
            series.push(flyLines)
          })
        }
        if(nodeTrailLines && nodeTrailLines.length >0 ){
          nodeTrailLines.forEach((trailLines) => {
            series.push(trailLines)
          })
        }

        return series
      },series_effect_scatter (nodes)  {
        // 散点图，带有涟漪特效动画的散点（气泡）
        let effectScatter = undefined
        if(nodes && nodes.length>0){
          const scatterData = [];
          for (let i = 0; i < nodes.length; i++) {
            const node = nodes[i];
            if (node && node.longitude && node.latitude) {
              /**
               *  // name 对应地图中的name
               *  // value值,前面两个是X轴,Y轴坐标, 后面的数据自定义,可以设置多个
               *  {name: '北京',  value: [113.653412, 43.854108, 4500]}
               */
              const  scatter = {name: node.nodeName, value: [node.longitude,node.latitude, node.ip]}
              scatterData.push(scatter);
            }
          }
          if(scatterData && scatterData.length>0){
             effectScatter =  {
              type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
              coordinateSystem: 'geo',//这个不能删，删了不显示，该系列使用的坐标系,'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系
              silent:false,               //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
              //name:"节点信息",             //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
              effectType: 'ripple',//特效类型，目前只支持涟漪特效'ripple'。
              legendHoverLink:true,       //是否启用图例 hover 时的联动高亮。
              showEffectOn: 'render',//配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
              rippleEffect: {//涟漪特效相关配置
                period: 4,//动画的时间，值越小速度越快
                scale: 2.5, //动画中波纹的最大缩放比例，波纹圆环最大限制，值越大波纹越大。
                brushType: 'stroke', //波纹的绘制方式，可选 'stroke' 和 'fill'。
              },
              zLevel: 2,
               //symbol: "circle",//散点图
              symbolSize: 10,//散点大小
              /**
               symbolSize: function (val) { // 涟漪图大小 val就是data中value数组
              return val[2] / 200;
            },
               **/
              label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
                show: true,//省份名显示隐藏
                position: 'right', //省份名显示位置
                /**
                 （1）{a}：系列名，series.name。
                 （2）{b}：数据名，series.data.name。
                 （3）{c}：数据值，series.data.value。
                 （4）{d}：百分比。
                 （5）{@xxx}：数据中名为'xxx'的维度的值，如{@product}表示名为'product'` 的维度的值。
                 （6）{@[n]}：数据中维度n的值，如{@[3]}` 表示维度 3 的值，从 0 开始计数。
                 字符示例：
                 formatter:"{b}：{c}({d}%)"
                 */
                formatter: '{b}',// 点的名字
                fontSize: 14,//文字大小
                color: '#fff', // 显示颜色
              },
              tooltip: {
                // 鼠标悬浮显示
                backgroundColor: 'rgba(255,255,255,0.7)',
                formatter: function (param) {
                  const value =  param.value;
                  // prettier-ignore
                  return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 5px;">'
                      + param.name + '</div>'
                      +  'IP地址：' +value[2]+ '<br>';
                }
              },
              itemStyle:{     //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                color: '#ff5722',//#1a5cd7 ddb926,99FBFE 光圈颜色
                shadowBlur: 5,
                shadowColor: '#fff',
              },
              data: scatterData,
            };
          }
        }
        return effectScatter
      }, series_fly_trail_lines (props)  {
        const nodeFlyLines =  [];
        const nodeTrailLines = [];
        const nodeFlyTrailLines = props.nodeFlyTrailLines;
        if(nodeFlyTrailLines && nodeFlyTrailLines.length > 0 ){
          nodeFlyTrailLines.forEach((flyTrailLines) => {

            // 设置射线效果图层
            const flyLines = {
              type: 'lines',//类型：射线
              zLevel: 1,//类似图层效果
              coordinateSystem: 'geo',
              effect: {
                show: true,//是否显示图标
                period: 10,// 运行速度，越大越慢
                //symbol: "arrow",//箭头图标
                symbolSize: 0,//图标大小
                trailLength: 1,//特效尾迹长度[0,1]值越大，尾迹越长重
                color: '#fff',
                shadowBlur: 0,
              },
              lineStyle: {
                color: flyTrailLines.lineColor,
                width: 1,//尾迹线条宽度
                opacity: 0.5,//尾迹线条透明度
                curveness:flyTrailLines.lineCurveness,//尾迹线条曲直度
              },
              data: flyTrailLines.lineDatas
            };
            const trailLines = {
              // 设置轨迹/流向线
              type: 'lines',
              zLevel: 2,
              coordinateSystem: 'geo',
              effect: {
                show: true,
                period: 10,// 运行速度，越大越慢
                trailLength: 0.7,//特效尾迹长度[0,1]值越大，尾迹越长重,大的话可以重叠
                //symbol: planePath, // 飞机 //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                symbol:'triangle',
                symbolSize: 6
              },
              lineStyle: {
                color: flyTrailLines.lineColor,
                width: 1,//尾迹线条宽度
                opacity: 0.5,//尾迹线条透明度
                curveness: flyTrailLines.lineCurveness,//尾迹线条曲直度
              },
              data:  flyTrailLines.lineDatas
            };

            //console.log("flyLines" )
            //console.log(flyLines)

            //console.log("trailLines" )
            //console.log(trailLines)

            nodeFlyLines.push(flyLines);
            nodeTrailLines.push(trailLines);
          });
        }




        return { nodeFlyLines, nodeTrailLines }
      },
    }
    //console.log("*******end methods******")


    // 监听数据变化
    watch(
      () => props,
      (props: any) => {
        // console.log("draw watch new")
        // console.log(val)
        options = {
          showLegendSymbol: true,
          tooltip: methods.options_tooltip(),
          // 底部背景
          geo:  methods.options_geo(),
          series:  methods.options_series(props)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )
    return () => {
      const height = "735px"
      const width = "1150px"

      return <div>
        <echart options={options} height={height} width={width} />
      </div>
    }
  }
})

